<template>
  <div class="sum">
    <div class="left">
      <CheckBox :isSelected="allSelected" @click.native="selectAll" />
      <span>全选</span>
    </div>
    <div class="mid">合计：{{totalPrice}}</div>
    <div class="right">去结算({{ selectedNum }})</div>
  </div>
</template>

<script>
import CheckBox from "components/content/checkBox";
import { mapGetters } from "vuex";
export default {
  data(){
    return{
      isSelected:false
    }
  },
  components: {
    CheckBox,
  },
  methods: {
    selectAll() {
      if (this.selectedNum != this.productsLength) {
        this.products.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.products.forEach((item) => {
          item.checked = false;
        });
      }
    },
  },
  computed: {
    ...mapGetters(["productsLength", "products"]),
    selectedNum() {
      return this.products.filter((item) => item.checked == true).length;
    },
    allSelected(){
       if (this.selectedNum == this.productsLength) {
        return true
      } else {
        return false
      }
    },
    totalPrice(){
      let total = 0;
      for(var item of this.products){
        if(item.checked){
          total += item.price * item.count
        }
      }
      return '￥' + total.toFixed(2)
    }
  },
};
</script>

<style scoped>
.sum {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  font-size: 13px;
  color: #666;
}
.left {
  width: 70px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.left span {
  margin-left: 5px;
}
.mid {
  flex: 1;
}
.right {
  color: #fff;

  text-align: center;
  flex: 0 1 25%;
  background-color: var(--bgColor);
}
</style>